<script setup>
import {useStore} from "vuex";
import {reactive} from "vue";

const props = defineProps(['detail']);
const emits = defineEmits(['cancel', 'submitDetail']);
const store = useStore();

const triggerCancel = () => {
  emits('cancel');
}

const triggerSubmit = () => {
  emits('submitDetail', props.detail);
}
</script>

<template>
  <el-date-picker style="margin-bottom: 10px" v-model="detail.dataDate" size="default" formate="YYYY-MM-DD"
                  value-format="YYYY-MM-DD" placeholder="数据日期"/>
  <el-input class="dialog-item" v-model="detail.roomNo" size="default" type="number"
            placeholder="房间号"/>
  <el-input class="dialog-item" v-model="detail.customer" size="default"
            placeholder="入住人姓名"/>
  <el-input class="dialog-item" v-model="detail.realIncome" size="default" type="number"
            placeholder="实际收款"/>
  <el-select class="dialog-item" v-model="detail.source" placeholder="收款渠道"
             size="default">
    <el-option v-for="source in store.state.allSource" :label="source" :value="source"/>
  </el-select>
  <el-input class="dialog-item" v-model="detail.description" size="default" type="textarea"
            placeholder="备注"/>
  <el-button class="dialog-btn" type="success" size="default" @click="triggerSubmit">提交</el-button>
  <el-button class="dialog-btn" type="warning" size="default" @click="triggerCancel">取消</el-button>
</template>

<style lang="scss">
.dialog-item {
  margin-bottom: 10px;
}

.dialog-btn {
  margin-top: 10px;
}
</style>